<template>
  <section class="vir-menu-page">
    <header class="vir-menu-header">
      <div class="vir-menu-header-left">
        <div>测试系统</div>
      </div>
      <div class="vir-menu-header-right">
        <el-dropdown @command="doClickUserCommand">
          <div class="el-dropdown-link" style="cursor: pointer;">
            <span>欢迎您:</span>
            <span style="color: #2b2b2b; margin-left: 8px;">{{$user.name}}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="view-info">个人信息</el-dropdown-item>
            <el-dropdown-item command="change-pwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
    <section class="vir-menu-container">
      <el-aside class="vir-menu-container-aside">
        <el-menu :default-active="$route.path" :router="true" :unique-opened="true" class="vir-menu">
          <!-- 第一层菜单 -- start -->
          <template v-for="(item0,index0) in menu">

            <!-- 第一层拥有子菜单的菜单 -- start -->
            <el-submenu :key="index0" :index="item0.path" v-if="show(item0) && item0.children" class="vir-menu-item vir-menu-one">
              <div slot="title" class="vir-menu-title">
                <i class="vir-menu-icon" :class="item0.meta.icon" v-if="item0.meta && item0.meta.icon"></i>
                <span class="vir-menu-name">{{item0.name}}</span>
              </div>

              <!-- 第二层菜单 -- start -->
              <template v-for="(item1,index1) in item0.children">
                <!-- 第二层拥有子菜单的菜单 -- start -->
                <el-submenu :key="index1" :index="item1.path" v-if="show(item1) && item1.children" class="vir-menu-item vir-menu-two">
                  <div slot="title" class="vir-menu-title">
                    <i class="vir-menu-icon" :class="item1.meta.icon" v-if="item1.meta && item1.meta.icon"></i>
                    <span class="vir-menu-name">{{item1.name}}</span>
                  </div>

                  <!-- 第三层菜单 -- start -->
                  <el-menu-item v-for="(item2,index2) in item1.children" :key="index2" :index="item2.path" v-if="show(item2)" class="vir-menu-item vir-menu-three">
                    <div slot="title" class="vir-menu-title">
                      <i class="vir-menu-icon" :class="item2.meta.icon" v-if="item2.meta && item2.meta.icon"></i>
                      <span class="vir-menu-name">{{item2.name}}</span>
                    </div>
                  </el-menu-item>
                  <!-- 第三层菜单 -- end -->
                </el-submenu>
                <!-- 第二层拥有子菜单的菜单 -- end -->

                <!-- 第二层无子菜单的菜单 -- start -->
                <el-menu-item :key="index1" :index="item1.path" v-if="show(item1) && !item1.children" class="vir-menu-item vir-menu-two">
                  <div slot="title" class="vir-menu-title">
                    <i class="vir-menu-icon" :class="item1.meta.icon" v-if="item1.meta && item1.meta.icon"></i>
                    <span class="vir-menu-name">{{item1.name}}</span>
                  </div>
                </el-menu-item>
                <!-- 第二层无子菜单的菜单 -- end -->
              </template>
              <!-- 第二层菜单 -- end -->

            </el-submenu>
            <!-- 第一层拥有子菜单的菜单 -- end -->

            <!-- 第一层无子菜单的菜单 -- start -->
            <el-menu-item :key="index0" :index="item0.path" v-if="show(item0) && !item0.children" class="vir-menu-item vir-menu-one">
              <div slot="title" class="vir-menu-title">
                <i class="vir-menu-icon" :class="item0.meta.icon" v-if="item0.meta && item0.meta.icon"></i>
                <span class="vir-menu-name">{{item0.name}}</span>
              </div>
            </el-menu-item>
            <!-- 第一层无子菜单的菜单 -- end -->
          </template>
          <!-- 第一层菜单 -- end -->
        </el-menu>
      </el-aside>
      <el-main class="vir-menu-container-main">
        <router-view />
      </el-main>
    </section>

    <el-dialog title="个人信息" :visible.sync="uinfVisible" width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="uinfVisible = false">取 消</el-button>
        <el-button size="medium" @click="uinfVisible = false" type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="pwdFormVisible" width="350px">
      <el-form label-width="80px" :model="pwdForm" size="small">
        <el-form-item label="原密码">
          <el-input v-model="pwdForm.oldPwd" placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="pwdForm.newPwd0" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="pwdForm.newPwd1" placeholder="请重新输入新密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="doSubmitPwd" type="primary">确 定</el-button>
          <el-button @click="pwdFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { RouteConfig } from 'vue-router';
import { menus } from '@/router';
import store from '@/store';

@Component
export default class MenuPage extends Vue {
  private menu: RouteConfig[] = menus;

  private uinfVisible: boolean = false;

  private pwdFormVisible: boolean = false;
  private pwdForm: any = {
    oldPwd: '',
    newPwd0: '',
    newPwd1: ''
  };

  private doClickUserCommand(command: string) {
    if (command === 'change-pwd') {
      this.pwdFormVisible = true;
    } else if (command === 'view-info') {
      this.uinfVisible = true;
    } else if (command === 'logout') {
      this.$user.clear();
    }
  }

  private doSubmitPwd() {
    this.$$loading.open('提交中...');
    this.$http.doPost('/api/password/change.json', this.pwdForm).then((res: any) => {
      this.$message.success('密码修改成功');
      this.$$loading.close();

      this.pwdFormVisible = false;
    }).catch((e: any) => {
      this.$$loading.close();
    });
  }

  /** 判断该菜单是否显示 */
  private show(item: RouteConfig) {
    if (!item || !item.meta) return true;
    if (item.meta.hide === true) return false;

    const roles: string[] = item.meta.roles || [];
    const role: string = this.$user.role;

    for (const temp of roles) {
      if (temp === role) return true;
      if (temp === 'none') return true;
    }

    return false;
  }
}
</script>
<style lang="scss" scoped>
@import "../assets/css/vir-variables.scss";
@import "../assets/css/vir-mixin.scss";

/*  主窗口布局 */
.vir-menu-page {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  box-sizing: border-box;

  /* 导航栏布局 */
  .vir-menu-header {
    display: flex;
    height: 60px;
    padding: 0 20px;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
  }

  .vir-menu-container {
    box-sizing: border-box;
    flex-direction: row;
    display: flex;
    flex: 1;

    /* 菜单栏布局 */
    .vir-menu-container-aside {
      @include vir_scrollbar();
      overflow-y: scroll;
    }

    /* 页面主体布局 */
    .vir-menu-container-main {
      @include vir_flex_1();
      @include vir_scrollbar();

      & > div.vir-fullscreen {
        @include vir_flex_1();
      }
    }
  }
}
</style>
